<template>
  <svg width="17" height="17" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 42L15 29H33L24 42Z" :fill="value === 'desc'? '#002FFF' : '#dadada'"
          :stroke="value === 'desc'? '#002FFF' : '#dadada'" stroke-width="4" stroke-linejoin="round"/>
    <path d="M24 6L15 19H33L24 6Z" :fill="value === 'asc'? '#002FFF' : '#dadada'"
          :stroke="value === 'asc'? '#002FFF' : '#dadada'" stroke-width="4" stroke-linejoin="round"/>
  </svg>
</template>
<script>
export default {
  name: 'icon',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orders: ['asc', 'desc'],
      colors: ['#dadada', '##002FFF'],
      index: 0
    };
  },
  methods: {
    onClick() {
      if (this.index === this.orders.length - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
      this.$emit('change', this.orders[this.index]);
    }
  },
};
</script>
<style scoped lang="scss">
</style>
